<template>
<view>
<!--<import src="../../webview/contact.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}" /> -->
<view class="body">
    <view class="header">
        <view class="tab">
            <view class="tab-bar">
                <text :class="'bar-item ' + (tabIndex == 0 ? 'chouse' : '')" @tap="barClick" data-index="0">活动</text>
                <text :class="'bar-item ' + (tabIndex == 1 ? 'chouse' : '')" @tap="barClick" data-index="1">景区</text>
            </view>
            <navigator class="city" :url="'city/city?type=' + tabIndex">
                <text>{{cityname}}</text>
                <image src="/static/images/dwicon.png" class="arrow-down"></image>
            </navigator>
        </view>
        <view class="moonth flex" v-if="tabIndex == 0">
            <view v-for="(item, index) in moonth" :key="index" :class="'moonth-item ' + (moonthIndex == index ? 'moonth-chouse' : '')" @tap="moonth" :data-index="index">
                {{item[1]}}月
            </view>
        </view>
        <swiper class="swiper" v-if="lunbo" :autoplay="true" indicator-dots indicator-active-color="#007aff">
            <swiper-item v-for="(item, index) in lunbo" :key="index" class="swiper-item" v-if="item.id">
                <image class="swiper-img" @tap="swiperNaiv" :data-index="index" :src="item.pic"></image>
            </swiper-item>
        </swiper>
        <view class="search row-between">
            <input type="text" confirm-type="search" @input="input" :placeholder="'请输入' + (tabIndex == 0 ? '活动' : '景点') + '名称'" placeholder-class="input-placeholder">
            <image src="/static/images/index/sousuo.png" class="search-icon" @tap="searchInput"></image>
        </view>
    </view>
    <view class="control row-between" v-if="tabIndex == 0">
        <view class="select flex center">
            <picker class="type-list" mode="selector" :range="type" @change="typeChange">
                {{type[typeIndex]}}
            </picker>
            <image src="http://imgbdb3.bendibao.com/whbdb/202011/2/20201102101456_60385.png" class="pick-icon"></image>
        </view>
        <!-- <view class="only-free {{free ? 'free' : ''}}" bindtap="free">只看免费优惠</view> -->
    </view>
    <view class="control row-between" v-else>
        <view class="select flex center" v-if="area">
            <picker class="type-list" mode="selector" :range="area" :value="areaIndex" range-key="cityname" @change="areaChange">
                {{area[areaIndex].cityname}}
            </picker>
            <image src="http://imgbdb3.bendibao.com/whbdb/202011/2/20201102101456_60385.png" class="pick-icon"></image>
        </view>
        <view class="select flex center" v-if="jingqu">
            <picker class="type-list" mode="selector" :range="jingqu" :value="jingquIndex" range-key="classname" @change="jingquChange">
                {{jingqu[jingquIndex].classname}}
            </picker>
            <image src="http://imgbdb3.bendibao.com/whbdb/202011/2/20201102101456_60385.png" class="pick-icon"></image>
        </view>
    </view>
    <view class="main">
        <view class="list-body">
            <view v-for="(item, index) in active" :key="index" class="list-item" v-if="active">
                <view class="item-title flex">
                    <view class="title-text">{{tabIndex == 0 ? item.title : item.com_name}}</view>
                    <view v-for="(category, index2) in item.huodong" :key="index2" class="tag-list flex">
                        <text class="tag-item">{{category}}</text>
                    </view>
                </view>
                <view class="item-body flex">
                    <image :class="'item-img ' + (tabIndex == 1 ? 'height' : '')" :src="tabIndex == 0 ? (item.pic ? item.pic : 'http://imgbdb3.bendibao.com/xcx/202011/05/20201105151554_97635.jpg') : (item.com_logo ? item.com_logo : 'http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161526_69096.jpg')"></image>
                    <view class="item-info">
                        <view class="item item-time flex" v-if="item.com_yytime">
                            <image class="item-icon" src="http://imgbdb3.bendibao.com/whbdb/202011/2/20201102133001_54107.png"></image>
                            <text class="content text-over">{{item.com_yytime}}</text>
                        </view>
                        <view class="item item-local flex" v-if="item.address || item.com_addr">
                            <image class="item-icon" src="http://imgbdb3.bendibao.com/whbdb/202011/2/20201102133018_76942.png"></image>
                            <text :class="'content text-over ' + (item.showAddr ? 'show-addr' : '')">{{tabIndex == 0 ? item.address : item.com_addr}}</text>
                            <text class="show" @tap="toMap" :data-text="tabIndex == 0 ? item.address : item.com_addr" :data-index="index">详情</text>
                        </view>
                        <view class="item item-price flex">
                            <image class="item-icon" src="http://imgbdb3.bendibao.com/whbdb/202011/2/20201102133039_89160.png"></image>
                            <text class="content price text-over">{{tabIndex == 0 ? item.price : item.com_price}}</text>
                            <text class="button" @tap="openMask" :data-index="index">预约</text>
                        </view>
                        <view class="item item-desc flex" v-if="item.description || item.order_desc && tabIndex == 0">
                            <image class="item-icon" src="http://imgbdb3.bendibao.com/whbdb/202011/2/20201102133101_91831.png"></image>
                            <view>
                                <text :class="'content  ' + (item.showDetail ? '' : 'text-over')">{{tabIndex == 0 ? item.description : item.order_desc}}</text>
                                <text class="show" @tap="showText" :data-index="index">详情</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="item-control row-between" v-if="tabIndex == 0">
                    <navigator class="control-item" v-if="item.yy_arr.id" :url="'/pages/article/detail/detail?id=' + item.yy_arr.id + '&type=' + item.yy_arr.type + '&city=' + citycode">
                        预约攻略
                    </navigator>
                    <navigator class="control-item play" v-if="item.yw_arr.id" :url="'/pages/article/detail/detail?id=' + item.yw_arr.id + '&type=' + item.yw_arr.type + '&city=' + citycode">
                        游玩攻略
                    </navigator>
                    <navigator class="control-item" v-if="item.jt_arr.id" :url="'/pages/article/detail/detail?id=' + item.jt_arr.id + '&type=' + item.jt_arr.type + '&city=' + citycode">
                        交通指南
                    </navigator>
                </view>
                <view class="item-control row-between" v-else>
                    <navigator class="control-item" v-if="item.rk_arr.id" :url="'/pages/article/detail/detail?id=' + item.rk_arr.id + '&type=' + item.rk_arr.type + '&city=' + citycode">
                        预约攻略
                    </navigator>
                    <navigator class="control-item play" v-if="item.youwan_arr.id" :url="'/pages/article/detail/detail?id=' + item.youwan_arr.id + '&type=' + item.youwan_arr.type + '&city=' + citycode">
                        游玩攻略
                    </navigator>
                    <navigator class="control-item" v-if="item.youwan_arr.id" :url="'/pages/article/detail/detail?id=' + item.youwan_arr.id + '&type=' + item.youwan_arr.type + '&city=' + citycode">
                        交通指南
                    </navigator>
                </view>
            </view>
            <view class="no-search" v-if="input  && !active">
                <image class="none-img" src="http://imgbdb3.bendibao.com/xcx/202011/05/20201105135738_11873.jpg" mode="widthFix">
                </image>
            </view>
            <view class="no-select" v-if="!input && !active">
                <image class="none-img" src="http://imgbdb3.bendibao.com/xcx/202011/05/20201105135844_30387.jpg" mode="widthFix"></image>
            </view>
        </view>
        <!-- 最新阅读 -->
        <view class="sy-box" v-if="newlist!='' && tabIndex == 0 && showList">
            <view class="title-box">
                <view class="title">
                    <!-- <view class="sline"></view> -->
                    <image src="/static/images/dbline.png"></image>
                    <text>最新活动</text>
                </view>
            </view>
            <navigator v-for="(item, index) in newlist" :key="index" class="content new-content" :url="'/pages/article/detail/detail?id=' + item.id + '&type=' + item.pagetype + '&city=' + citycode">
                <view class="title new-title">
                    <text>{{item.title}}</text>
                    <text class="time">{{item.publictime}}</text>
                </view>
                <image :src="item.images" v-if="item.images" mode="aspectFill"></image>
            </navigator>
        </view>
    </view>
</view>
<view class="mask" v-if="showMask" @tap="closeMask" :style="'height: ' + screenHeight + 'px'" :hover-stop-propagation="true"></view>
<view class="fixed" v-if="showMask && tabIndex == 0">
    <view class="flex center border"><image src="/static/images/scroll.png" class="scroll"></image></view>
    <view class="fixed-content">
        <view class="border flex" v-if="data.method">
        <view class="border-title">预约方式</view>
        <view class="border-content">{{data.method}}</view>
    </view>
    <view class="border flex" v-if="data.ordertime" @tap="copy" :data-text="data.ordertime">
        <view class="border-title">预约时间</view>
        <view class="border-content">{{data.ordertime}}</view>
    </view>
    <view class="border flex" v-if="data.description" @tap="copy" :data-text="data.description">
        <view class="border-title">预约说明</view>
        <view class="border-content">{{data.description}}</view>
    </view>
    <view class="border flex" v-if="data.rk_arr.url">
        <view class="border-title">{{data.type}}入口</view>
        <view class="border-content rukou" @tap="seeDetail" :data-id="data.rk_arr.id" :data-url="data.rk_arr.url">点击入口</view>
    </view>
    <view class="border flex" v-if="data.tel" @tap="copy" :data-text="data.tel">
        <view class="border-title">咨询电话</view>
        <view class="border-content">{{data.tel}}</view>
    </view>
    </view>
    <view class="cancel" @tap="closeMask">取消</view>
</view>
<view class="fixed" v-if="showMask && tabIndex == 1">
    <view class="flex center border"><image src="/static/images/scroll.png" class="scroll"></image></view>
    <view class="fixed-content">
        <view class="border flex" v-if="data.com_yytime" @tap="copy" :data-text="data.com_yytime">
        <view class="border-title">开放时间</view>
        <view class="border-content">{{data.com_yytime}}</view>
    </view>
    <view class="border flex" v-if="data.com_price" @tap="copy" :data-text="data.com_price">
        <view class="border-title">景点门票</view>
        <view class="border-content">{{data.com_price}}</view>
    </view>
    <view class="border flex" v-if="data.order_method">
        <view class="border-title">预约方式</view>
        <view class="border-content">{{data.order_method}}</view>
    </view>
    <view class="border flex" v-if="data.order_time">
        <view class="border-title">预约时间</view>
        <view class="border-content">{{data.order_time}}</view>
    </view>
    <view class="border flex" v-if="data.order_desc" @tap="copy" :data-text="data.order_desc">
        <view class="border-title">预约说明</view>
        <view class="border-content">{{data.order_desc}}</view>
    </view>
    <view class="border flex" v-if="data.order_url">
        <view class="border-title">预约入口</view>
        <view class="border-content rukou" @tap="seeDetail" :data-url="data.order_url">点击入口</view>
    </view>
    <view class="border flex" v-if="data.com_tel" @tap="copy" :data-text="data.com_tel">
        <view class="border-title">咨询电话</view>
        <view class="border-content">{{data.com_tel}}</view>
    </view>
    </view>
    <view class="cancel" @tap="closeMask">取消</view>
</view>
</view>
</template>

<script>
import util from "../../../utils/util";
const app = getApp();
var citycode = "sz";
let nowMonth = new Date().getMonth() + 1;

export default {
  data() {
    return {
      moonth: [[]],
      type: ["全部活动"],
      tabIndex: 0,
      moonthIndex: "0",
      lunbo: [],
      typeIndex: 0,
      screenHeight: "",
      showMask: false,
      input: "",
      free: 0,
      citycode: "sz",
      cityname: "深圳",
      showtk: false,
      area: [],
      areaIndex: 0,
      jingqu: [],
      jingquIndex: 0,
      textIndex: "",
      showList: true,
      active: false,
      newlist: [],
      jqid: "",
      areaid: "",
      data: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    let systemInfo = uni.getSystemInfoSync();
    this.setData({
      screenHeight: systemInfo.safeArea.height - systemInfo.statusBarHeight,
      citycode: options.citycode ? options.citycode : uni.getStorageSync('citycode') ? uni.getStorageSync('citycode') : 'sz',
      cityname: options.cityname ? options.cityname : uni.getStorageSync('city') ? uni.getStorageSync('city') : '深圳',
      tabIndex: options.type ? options.type : 0,
      jqid: options.jingdian,
      areaid: options.areaid ? options.areaid : ''
    });
  },

  onShow() {
    this.setData({
      areaIndex: 0,
      jingquIndex: 0
    });
    if (this.tabIndex == 0) this.getActiveInfo().then(res => {
      if (res.state == 1) {
        if (res.data.active) res.data.active.unshift("全部活动");
        this.setData({
          moonth: res.data.month,
          type: res.data.active
        });
        this.moonth[this.moonthIndex][1] == nowMonth ? this.setData({
          showList: true
        }) : this.setData({
          moonthIndex: 0,
          showList: false
        });
        this.getActiveInfo(this.moonth[this.moonthIndex][0]);
      }
    });else if (this.tabIndex == 1) {
      this.getInfo();
    }
  },

  onShareAppMessage: function () {},
  methods: {
    // 获取活动信息
    getActiveInfo(mon = "") {
      uni.showLoading();
      return new Promise(resolve => {
        let data = {
          action: "huodong",
          citycode: this.citycode,
          chouse: 1,
          mon,
          huodong: this.input,
          active: this.typeIndex == 0 ? '' : this.type[this.typeIndex],
          free: this.free,
          type: "city"
        };
        util.getUrl(app.globalData.url).then(res => {
          util.request("huodong.php", data, "POST").then(res => {
            if (res.data.state == 1) {
              if (res.data.data.data) {
                res.data.data.data.forEach(item => {
                  item.actdate = item.actdate.split(" ")[0];
                  item.expiredate = item.expiredate.split(" ")[0];
                  item.showDetail = false;
                  if (new Date(item.expiredate).getTime()) item.com_yytime = `${item.actdate}-${item.expiredate}`;else item.com_yytime = `${item.actdate}起`;
                });
              }

              this.setData({
                lunbo: res.data.data.lunbo,
                active: res.data.data.data
              });
              uni.hideLoading();
              this.getnewlist();
            }

            return resolve(res.data);
          });
        });
      });
    },

    // 获取景点信息
    getInfo() {
      uni.showLoading();
      let area;

      if (this.areaid) {
        area = this.areaid;
      } else if (this.area[0]) {
        if (this.area[this.areaIndex].id) {
          area = this.area[this.areaIndex].id;
        } else {
          area = '';
        }
      } else {
        area = '';
      }

      let data = {
        action: "huodong",
        citycode: this.citycode,
        chouse: 2,
        huodong: this.input,
        area,
        jingdian: this.jingqu ? this.jingqu[0] ? this.jingqu[this.jingquIndex].id : this.jqid : "",
        type: "jingqu"
      };
      util.request("huodong.php", data, "POST").then(res => {
        if (res.data.state == 1) {
          uni.hideLoading();
          if (res.data.data.area) res.data.data.area.unshift({
            id: "",
            cityname: "区域"
          });

          if (res.data.data.class) {
            res.data.data.class.unshift({
              id: "",
              classname: "全部"
            });
            res.data.data.class.forEach(item => {
              if (item.id) item.classname = item.classname.split("|")[1];
            });
          }

          if (res.data.data.data) {
            res.data.data.data.forEach(item => {
              item.com_price = item.com_price ? item.com_price.replace(/\r\n/g, "") : "";
              item.com_price = item.com_price ? item.com_price.replace(/\n/g, "") : "";
            });
          }

          this.setData({
            area: res.data.data.area
          });
          if (this.areaid) if (this.area.some(item => item.id == this.areaid)) {
            this.areaIndex = this.area.findIndex(item => item.id == this.areaid);
            this.areaid = '';
            this.setData({
              areaIndex: this.areaIndex,
              areaid: this.areaid
            });
          } else {
            this.areaid = '';
            this.setData({
              areaid: this.areaid
            });
            uni.showToast({
              title: '改区域暂无景点数据',
              icon: 'none',
              duration: 1000,
              success: () => setTimeout(() => this.getInfo(), 1000)
            });
          }
          this.setData({
            jingqu: res.data.data.class,
            active: res.data.data.data,
            lunbo: res.data.data.lunbo
          });
          if (this.jqid) if (this.jingqu.some(item => item.id == this.jqid)) {
            this.jingquIndex = this.jingqu.findIndex(item => item.id == this.jqid);
            this.jqid = '';
            this.setData({
              jingquIndex: this.jingquIndex,
              jqid: this.jqid
            });
          } else {
            this.jqid = '';
            this.setData({
              jqid: this.jqid
            });
            uni.showToast({
              title: '该城市暂无该景点类型',
              icon: 'none',
              duration: 1000,
              success: () => setTimeout(() => this.getInfo(), 1000)
            });
          }
          this.getnewlist();
        }
      }).catch(err => uni.hideLoading());
    },

    // 顶部导航栏切换
    barClick(e) {
      let index = util.getValue("index", e);
      this.setData({
        tabIndex: index
      });
      if (index == 0) this.getActiveInfo(this.moonth[this.moonthIndex][0]).then(res => {
        this.setData({
          moonth: res.data.month
        });
      });else {
        this.getInfo();
        this.setData({
          showList: false
        });
      }
    },

    // 月份切换
    moonth(e) {
      let index = util.getValue("index", e);
      if (this.moonth[index][1] == nowMonth) this.setData({
        showList: true
      });else this.setData({
        showList: false
      });
      this.setData({
        moonthIndex: index
      });
      this.getActiveInfo(this.moonth[this.moonthIndex][0]);
    },

    // 活动类型切换
    typeChange(e) {
      let index = e.detail.value;
      this.setData({
        typeIndex: index
      });
      this.getActiveInfo(this.moonth[this.moonthIndex][0]).then(res => {
        if (res.state == 1) this.setData({
          lunbo: res.data.lunbo,
          active: res.data.data
        });
      });
    },

    // 展示浮层
    openMask(e) {
      let index = util.getValue("index", e);
      let data = this.active[index];
      this.detailIndex = index;
      this.setData({
        showMask: true,
        data
      });
    },

    input(e) {
      let input = e.detail.value;
      this.setData({
        input
      });
      if (this.tabIndex == 0) this.getActiveInfo(this.moonth[this.moonthIndex][0]);else if (this.tabIndex == 1) this.getInfo();
    },

    // 只看免费
    free() {
      this.setData({
        free: this.free ^ 1
      });
      this.getActiveInfo(this.moonth[this.moonthIndex][0]);
    },

    // 最新阅读的接口
    getnewlist(siteid) {
      let newData = {
        citycode: this.citycode,
        action: 'list',
        pagesize: 50,
        siteid: siteid,
        path: "article",
        city: this.cityname ? this.cityname : uni.getStorageSync("city"),
        keywords: this.typeIndex == 0 ? "活动" : this.type[this.typeIndex]
      };
      util.request('index.php', newData, 'GET').then(res => {
        this.setData({
          newlist: res.data
        });
      });
    },

    seeDetail(e) {
      let data = this.active[this.detailIndex];
      let id = util.getValue("url", e);
      let url = util.getValue("url", e);
      let title;

      if (this.tabIndex == 0) {
        title = `${data.title}${data.type}入口`;
      } else {
        title = `${data.com_name}预约入口`;
      }

      this.setData({
        showtk: true
      });
      util.navContact(title, url);
    },

    // 进入客服会话
    contact() {
      this.setData({
        showtk: false
      });
    },

    // 关闭
    close() {
      this.setData({
        showtk: false
      });
    },

    closeMask() {
      this.setData({
        showMask: false
      });
    },

    showText(e) {
      let index = util.getValue("index", e);
      this.active[index].showDetail = !this.active[index].showDetail;
      this.setData({
        active: this.active
      });
    },

    toMap(e) {
      let index = util.getValue("index", e);
      let text = util.getValue("text", e);
      let data = this.active[index];
      uni.setClipboardData({
        data: text,
        success: result => {
          setTimeout(() => {
            if (this.tabIndex == 0) {
              if (data.jd && data.wd) uni.navigateTo({
                url: `/pages/map/map?lat=${data.wd}&lng=${data.jd}&addr=${data.address}&tel=${data.tel}`
              });else {
                data.showAddr = true;
                this.setData({
                  active: this.active
                });
              }
            } else if (this.tabIndex == 1) {
              if (data.com_jd && data.com_wd) uni.navigateTo({
                url: `/pages/map/map?lat=${data.com_wd}&lng=${data.com_jd}&addr=${data.com_addr}&tel=${data.com_tel}`
              });else {
                data.showAddr = true;
                this.setData({
                  active: this.active
                });
              }
            }
          }, 500);
        }
      });
    },

    areaChange(e) {
      let index = e.detail.value;
      this.setData({
        areaIndex: index
      });
      this.getInfo();
    },

    jingquChange(e) {
      let index = e.detail.value;
      this.setData({
        jingquIndex: index
      });
      this.getInfo();
    },

    copy(e) {
      let data = util.getValue("text", e);
      uni.setClipboardData({
        data
      });
    },

    swiperNaiv(e) {
      let index = util.getValue("index", e);
      let data = this.lunbo[index];

      if (data) {
        if (data.lunbo_arr.id) uni.navigateTo({
          url: `/pages/article/detail/detail?id=${data.lunbo_arr.id}&type=${data.lunbo_arr.type}&city=${data.citycode}`
        });else {
          if (data.path) uni.navigateTo({
            url: `/${data.path}`
          });else {
            this.setData({
              showtk: true
            });
            util.navContact(data.name, data.lunbo_arr.url);
          }
        }
      }
    },

    searchInput() {
      console.log("占位：函数 searchInput 未声明");
    }

  }
};
</script>
<style>
.body {
    font-weight: 600;
}

.text-over {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.show {
    flex-shrink: 0;
    margin-left: 18rpx;
    color: #5195DD;
    font-size: 26rpx;
}

.item-desc .text-over {
    display: inline-block;
    max-width: 335rpx;
    vertical-align: bottom;
}

.tab {
    position: relative;
    height: 107rpx;
    margin-bottom: 39rpx;
    line-height: 107rpx;
    padding-right: 48rpx;
    border-bottom: 2rpx solid #F6F6F6;
}

.tab-bar {
    padding-left: 48rpx;
    text-align: center;
}

.arrow-down {
    width: 14rpx;
    height: 10rpx;
    margin-left: 8rpx;
    vertical-align: middle;
}

.bar-item {
    padding-bottom: 16rpx;
    color: #A6A6A6;
}

.bar-item:first-child {
    margin-right: 56rpx;
}

.chouse {
    color: #313131;
    border-bottom: 6rpx solid #5195DD;
}

.city {
    position: absolute;
    right: 48rpx;
    top: 28rpx;
    height: 58rpx;
    min-width: 130rpx;
    line-height: 58rpx;
    font-size: 30rpx;
    text-align: center;
    color: #313131;
    border-radius: 30rpx;
    background-color: #F2F2F2;
}

.moonth {
    margin-bottom: 30rpx;
    padding-left: 48rpx;
}

.moonth-item {
    width: 150rpx;
    height: 62rpx;
    margin-right: 18rpx;
    line-height: 62rpx;
    font-size: 28rpx;
    color: #9A9A9A;
    text-align: center;
    background-color: #EEEEEE;
    border-radius: 32rpx;
}

.moonth-chouse {
    color: #FFFFFF;
    background-color: #3CA4F9;
}

.swiper {
    height: 216rpx !important;
    margin: 0 48rpx;
    margin-bottom: 24rpx;
}

.swiper-img,
.swiper-item {
    width: 100%;
    height: 216rpx !important;
    border-radius: 15rpx;
}

.search {
    height: 70rpx;
    padding: 0 36rpx;
    margin: 0 48rpx;
    line-height: 70rpx;
    color: #A7A7A7;
    font-size: 28rpx;
    border-radius: 36rpx;
    background-color: #F5F5F5;
}

.search-icon {
    width: 30rpx;
    height: 30rpx;
    padding: 15rpx;
}

input,
.input-placeholder {
    font-size: 28rpx;
    color: #A7A7A7;
    font-weight: 400;
    flex: 1;
}

.main {
    padding: 22rpx 16rpx;
    background-color: rgb(249, 249, 249);
}

.control {
    margin-top: 24rpx;
    padding: 26rpx 68rpx;
    background-color: #FFFFFF;
    box-shadow: 0px 0 12rpx 0px rgba(0, 0, 0, 0.16);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.select {
    max-width: 200rpx;
    height: 58rpx;
    padding: 0 30rpx;
    line-height: 58rpx;
    font-size: 30rpx;
    text-align: center;
    border-radius: 24rpx;
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.16);
}

.pick-icon {
    width: 14rpx;
    height: 10rpx;
    margin-left: 14rpx;
}

.list-item {
    margin-bottom: 18rpx;
    padding: 30rpx 34rpx;
    background: #ffffff;
    border-radius: 20px;
}

.tag-item {
    min-width: 100rpx;
    height: 40rpx;
    margin-left: 12rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    color: #FA4554;
    text-align: center;
    border-radius: 20rpx;
    border: 2rpx solid #fa4554;
}

.item-title {
    margin-bottom: 34rpx;
}

.item-info {
    font-size: 30rpx;
    vertical-align: middle;
    overflow: hidden;
}

.item-img {
    flex-shrink: 0;
    width: 184rpx;
    height: 228rpx;
    margin-right: 23rpx;
    border-radius: 15rpx;
}

.item {
    margin-bottom: 16rpx;
}

.item-icon {
    flex-shrink: 0;
    width: 23rpx;
    height: 23rpx;
    margin-right: 18rpx;
}

.price {
    font-size: 30rpx;
    color: #FF8223;
}

.button {
    width: 88rpx;
    height: 50rpx;
    flex-shrink: 0;
    margin-left: 18rpx;
    padding: 0 18rpx;
    line-height: 50rpx;
    color: #FFFFFF;
    font-size: 26rpx;
    text-align: center;
    background-color: #FF6600;
    border-radius: 30rpx;
}

.item-control {
    margin-top: 30rpx;
}

.control-item {
    width: 130rpx;
    height: 74rpx;
    padding: 0 28rpx;
    line-height: 74rpx;
    color: #5195DD;
    text-align: center;
    font-size: 30rpx;
    border-radius: 38rpx;
    border: 2rpx solid rgba(81, 149, 221, 0.29);
}

.play {
    background-color: rgba(81, 149, 221, .15);
    border: 0;
}

.mask {
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 100vh;
    opacity: 0.38;
    background: #000000;
    z-index: 1;
}

.fixed {
    position: fixed;
    width: 100%;
    max-height: 75vh;
    bottom: 0;
    z-index: 2;
    padding: 0 50rpx;
    padding-top: 66rpx;
    padding-bottom: 48rpx;
    font-size: 30rpx;
    font-weight: 600;
    background-color: #FFFFFF;
    border-radius: 74rpx 74rpx 0 0;
    box-sizing: border-box;
}

.border {
    margin-bottom: 50rpx;
    align-items: flex-start;
}

.border-title {
    min-width: 120rpx;
    flex-shrink: 0;
    color: #141414;
}

.border-content {
    margin-left: 56rpx;
    color: #5A5A5A;
}

.cancel {
    /* position: fixed; */
    /* bottom: 48rpx; */
    width: 80%;
    height: 68rpx;
    margin: 0 auto;
    line-height: 68rpx;
    color: #FFFFFF;
    text-align: center;
    border-radius: 35rpx;
    background-color: #ff6600;
}

.only-free {
    width: 184rpx;
    height: 82rpx;
    line-height: 82rpx;
    font-size: 22rpx;
    text-align: center;
    color: #9A9A9A;
    background-color: #EEEEEE;
    border-radius: 38rpx;
}

.free {
    color: #FFFFFF;
    background-color: #3CA4F9;
}


/* 
.title-text {
    flex-shrink: 0;
} */

.sy-box {
    padding: 34rpx;
    border-radius: 20rpx;
    background-color: #FFFFFF;
}

.sy-box .content {
    padding: 20rpx 0;
    display: flex;
    align-items: center;
    margin-top: 10rpx;
}

.sy-box .new-content {
    padding-bottom: 19rpx;
    border-bottom: 2rpx solid #F0F0F0;
}

.sy-box .new-content {
    padding-bottom: 19rpx;
    border-bottom: 2rpx solid #F0F0F0;
}

.sy-box .title {
    font-size: 40rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(53, 53, 53, 1);
    line-height: 68rpx;
}

.sy-box .content .title {
    display: flex;
    align-items: flex-start;
    flex: 1;
}

.new-title {
    flex-direction: column;
}

.sy-box .content image {
    width: 198rpx;
    height: 144rpx;
    border-radius: 12rpx;
    margin-left: 20rpx;
}

.title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title-box .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 40rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(53, 53, 53, 1);
    line-height: 68rpx;
}

.title image {
    width: 16rpx;
    height: 28rpx;
    margin-right: 10rpx;
}

.title-box .title text {
    font-size: 38rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(53, 53, 53, 1);
    line-height: 45rpx;
}

.sy-box .title text {
    line-height: 45rpx;
}

.sy-box .content text {
    font-size: 30rpx !important;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
}

.new-title .time {
    font-size: 22rpx !important;
    color: #989696 !important;
}

.rukou {
    color: #5195DD;
}

.height {
    height: 184rpx;
}

.none-img {
    width: 100%;
}

.scroll {
    width: 40rpx;
    height: 16rpx;
}

.fixed-content {
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: 80rpx;
}

.show-addr {
    white-space: normal;
}
</style>